<template>
    <div class="compassclass">
        <div class="instrument cesium_north_pointer">
            <div ref="pointer" class="north_pointer"></div> 
            <!-- 这里替换了一下，还得去找对应的文件 -->
        </div>
    </div>

</template>

<script setup>
import { ref, watch, onMounted } from 'vue'

// 定义 props
const props = defineProps(['viewer', 'compassId'])

// 定义 ref
const pointer = ref(null)

// 定义方法
const initCompass = (viewer, compassId) => {
    // var cesium_north_pointer = $.flightIndicator(compassId, 'cesium_north_pointer', {});
    viewer.scene.preRender.addEventListener(() => {
        let heading = viewer.camera.heading * 180 / Math.PI;
        // cesium_north_pointer.setNorthDirection(-heading);
        pointerTransform(-heading)
    });
    console.log(viewer, compassId)
}

const pointerTransform = (degree) => {
    if (pointer.value) {
        pointer.value.style.transform = 'rotate(' + degree + 'deg)';
    }
}

// 监听 viewer 变化
watch(() => props.viewer, (val) => {
    if (val !== null) {
        initCompass(props.viewer, props.compassId);
    }
})

// 组件挂载
onMounted(() => {
    // initCompass(props.viewer, props.compassId);
})
</script>

<style lang="css" scoped>
    .compassclass {
        width: 100px;
        height: 100px;
        overflow: hidden;
        /* z-index: 999; */
    }
    
    .north_pointer {
        width: 4px;
        height: 40px;
        background: linear-gradient(to top, #ff0000 0%, #ff0000 50%, #ffffff 50%, #ffffff 100%);
        margin: 30px auto;
        transform-origin: center bottom;
        position: relative;
    }
    
    .north_pointer::before {
        content: '';
        position: absolute;
        top: -8px;
        left: -6px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #ff0000;
    }
    
    .instrument {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #f0f0f0;
        border: 2px solid #ccc;
        position: relative;
    }
</style>